<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const activeName = ref('first')
const router = useRouter()
const handleClick = (tab) => {
  console.log(tab.index)
  switch (tab.index) {
    case '0':
      router.push('/menu/homepage/video')
      break
    case '1':
      router.push('/menu/homepage/like')
      break
    default:
      router.push('/menu/homepage/video')
      break
  }
}
defineOptions({
  name: 'indexHomepage',
})
</script>

<template>
  <div class="containerMain">
    <div class="top">
      <div class="top-left">
        <el-image src="/images/logo.png" alt="logo"></el-image>
      </div>
      <div class="top-right">
        <p>name</p>
        <p>关注 207 | 粉丝 66 | 获赞 359</p>
        <p>抖音号 id <el-button>男</el-button> <el-button>住址</el-button></p>
      </div>
    </div>
    <div class="bottom">
      <el-tabs type="border-card" v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="作品" name="first"><RouterView class="main"></RouterView></el-tab-pane>
        <el-tab-pane label="喜欢" name="second"><RouterView class="main"></RouterView></el-tab-pane>
        <el-tab-pane label="收藏" name="third"><RouterView class="main"></RouterView></el-tab-pane>
        <el-tab-pane label="观看历史" name="fourth">
          <RouterView class="main"></RouterView>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.containerMain {
  width: 100%;
  height: 100%;
  .top {
    display: flex;
    width: 100%;
    height: 25%;
    align-items: center;
    .top-left {
      height: 100%;
      width: 15%;
    }
  }
  .bottom {
    height: 75%;
    width: 100%;
    .demo-tabs {
      height: 100%;
      background-color: aqua;
    }
    .main {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
